Redux Toolkit 教程

1. 简介

Redux Toolkit 是 Redux 官方推荐的状态管理库，旨在简化 Redux 的使用，减少样板代码，并提供更好的开发体验。它集成了许多常用的 Redux 模式和工具，使得状态管理更加高效和易于维护。

1.1 为什么选择 Redux Toolkit？

• 简化配置：Redux Toolkit 提供了预配置的 Redux 设置，减少了手动配置的复杂性。
• 减少样板代码：通过内置的工具和函数，减少了手动编写 Redux 代码的数量。
• 更好的开发体验：集成了 TypeScript 支持、Immer 库（简化不可变状态更新）等，提升了开发效率。

2. 环境搭建

在开始使用 Redux Toolkit 之前，确保你已经安装了 Node.js 和 npm。然后，使用 Create React App 创建一个新的 React 项目。

npx create-react-app my-redux-toolkit-app
cd my-redux-toolkit-app

接下来，安装 Redux Toolkit 和 React-Redux：

npm install @reduxjs/toolkit react-redux

3. 创建 Redux Store

Redux Toolkit 提供了一个 configureStore 函数，用于创建 Redux store。这个函数简化了 store 的配置过程，并集成了 Redux DevTools 和 Redux Thunk。

3.1 创建 Slice

Slice 是 Redux Toolkit 中的一个概念，它将 reducer 和 action creators 封装在一起。首先，创建一个 counterSlice.js 文件：

// src/features/counter/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

3.2 配置 Store

在 src/app/store.js 文件中配置 Redux store：

// src/app/store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

3.3 提供 Store

在 src/index.js 文件中，使用 Provider 组件将 store 提供给整个应用：

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './app/store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

4. 使用 Redux State 和 Actions

在 React 组件中，可以使用 useSelector 和 useDispatch 钩子来访问 Redux state 和 dispatch actions。

4.1 访问 State

在 src/App.js 文件中，使用 useSelector 访问 counter 的值：

// src/App.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount } from './features/counter/counterSlice';

function App() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <button onClick={() => dispatch(incrementByAmount(5))}>Increment by 5</button>
    </div>
  );
}

export default App;

4.2 Dispatch Actions

在上面的代码中，点击按钮时会 dispatch 相应的 action，从而更新 Redux store 中的 state。

5. 实践练习

5.1 练习：创建一个 Todo List

1. 创建 Todo Slice：在 src/features/todo/todoSlice.js 文件中创建一个 todoSlice，包含添加、删除和标记完成的功能。
2. 配置 Store：在 src/app/store.js 文件中添加 todoReducer。
3. 使用 Todo List：在 src/App.js 文件中创建一个 Todo List 组件，使用 useSelector 和 useDispatch 来管理 Todo 列表。

5.2 练习：异步 Action

1. 创建异步 Slice：在 src/features/async/asyncSlice.js 文件中创建一个异步 Slice，使用 createAsyncThunk 处理异步操作（如 API 请求）。
2. 配置 Store：在 src/app/store.js 文件中添加 asyncReducer。
3. 使用异步 Action：在 src/App.js 文件中创建一个组件，使用 useSelector 和 useDispatch 来处理异步操作。

6. 总结

Redux Toolkit 通过简化 Redux 的使用，使得状态管理更加高效和易于维护。通过本教程，你应该已经掌握了 Redux Toolkit 的基本使用方法，并能够创建和管理 Redux store。

6.1 下一步

• 深入学习：探索 Redux Toolkit 的高级功能，如 createAsyncThunk、createEntityAdapter 等。
• 实践项目：在实际项目中应用 Redux Toolkit，进一步提升你的状态管理能力。

希望本教程对你有所帮助，祝你在 React 和 Redux 的学习旅程中取得成功！